<template>
  <Header title="账号管理" />
  <div>
    <van-field v-model="name" label="昵称" placeholder="请输入昵称" />
    <van-field v-model="sign" label="个性签名" placeholder="个性签名" disabled />
    <van-field v-model="pass" label="密码" placeholder="请输入密码" />
  </div>
  <van-button type="primary" color="#ffc400" round block class="save-btn" @click="save">保存</van-button>
  <van-button type="primary" color="#ffc400" round block class="save-btn" @click="loginOut">退出登录</van-button>

</template>
<script>
import { reactive, toRefs } from 'vue';
import Header from '../../components/header.vue'
import { showToast } from 'vant';
import { useRouter } from 'vue-router';
export default {
  components: {
    Header
  },
  setup() {
    const data = reactive({
      name: '',
      sign: '自强不息',
      pass: ''
    })
    const router =useRouter()
    const save = () => {
      if (data.name && data.pass) {
        let userInfo = JSON.parse(localStorage.userInfo)
        let newUserInfo = {
          user: data.name || userInfo.name,
          pass: data.pass || userInfo.pass,
        }
        localStorage.setItem('userInfo', JSON.stringify(newUserInfo))
        showToast('修改成功')
        router.push('/my')
      } else { 
        showToast('请输入内容')
      }
    }
    const loginOut = () => { 
      localStorage.removeItem('isLogin')
      router.push('login')
      showToast('退出成功')
    }
    return {
      ...toRefs(data),
      save,
      loginOut
    }
  }
}

</script>

<style lang="less" scoped>
.van-button--danger {
  background-color: #ffc400;
  border-color: #ffc400;
}

.save-btn {
  width: 80%;
  margin: 20px auto;
}
</style>